<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id = "box">
        <div>
            <input v-model="mytext">
            <label>
                <select v-model="obj.year">
                    <option  value="2024">2024</option>
                    <option value="2023">2023</option>
                    <option value="2022">2022</option>
                    <option value="2021">2021</option>
                </select>
            </label>
            <label>
                <select v-model="obj.mouth">
                    <option  value="11">11</option>
                    <option value="12">12</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
            </label>
            <label>
                <select v-model="obj.day">
                    <option  value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                </select>
            </label>
        </div>
    </div>
    <script>
      var obj = {
          data(){
              return {
                  mytext:"2024",
                  obj:{
                      year:2021,
                      mouth: 11,
                      day: 23,
                  }
              }
          },
          watch:{
              // mytext(value,oldValue){
              //     console.log(value)
              // },//第一种写法
              mytext:"changeFunction", //第二种写法

              //监听对象
              obj:{
                  handler(value){
                      this.changeFunction(value)
                  },
                  deep:true, //复杂对象进行深度监听
                  immediate:true //监听后立即执行
              }
          },
          methods:{
              changeFunction(value){
                  console.log(value)
              }
          }

      }
      var app = Vue.createApp(obj).mount("#box")
    </script>
</body>
</html>